;(function (window) {

  const clickoutside = {
    // 初始化指令
    bind(el, binding, vnode) {
      function documentHandler(e) {
        if (el.contains(e.target)) {
          return false;
        }
        if (binding.expression) {
          binding.value(e);
        }
      }

      el.__vueClickOutside__ = documentHandler;
      document.addEventListener('click', documentHandler);
    },
    unbind(el, binding) {
      document.removeEventListener('click', el.__vueClickOutside__);
      delete el.__vueClickOutside__;
    },
  };

  const hlDropdown = {
    template:`<div class="hl-dropdown"
         ref="hl-dropdown"
         :class="[ placement ? 'hl-placement-' + placement : '']"
         :style="{'width':width + 'px'}"
         :x-placement="placement"
         v-clickoutside="handleClose"
         @mouseenter.stop="handleMouseenter"
         @mouseleave.stop="handleMouseleave"
    >
      <ul class="hl-dropdown__wrap">
        <li class="hl-dropdown__item"
            v-for="(item,index) in data"
            data-code="item.code"
            :class="{ 'is-selected':selectedData.indexOf(item.code) > -1 }"
            @click="handleClick(item,index)"
        >
            {{item.name}}
        </li>
      </ul>
      <div class="hl-dropdown__arrow"></div>
    </div>`,
    data(){
      return {

      }
    },
    model: {
      prop: 'selected',
      event: 'on-select-item',
      isShow: false,
    },
    props:{
      data: {
        type: Array,
        default: () => []
      },
      selected: {
        type: Array,
        default: () => []
      },
      title:{
        type:String,
        default:''
      },
      content: {
        type:String,
        default:''
      },
      width: {
        type:[String,Number],
        default:'150'
      },
      placement: {
        type:String,
        default:'bottom'
      },
      trigger: {
        type:String,
        default:'hover'
      },
      left: {
        type:[String,Number],
        default:'undefined'
      },
      top:{
        type:[String,Number],
        default:'undefined'
      }
    },
    directives:{clickoutside},
    watch:{
      left(val){
        if(val) this.initPosition()
      },
      top(val){
        if(val) this.initPosition()
      }
    },
    computed:{
      selectedData() {
        return this.selected
      },
    },
    created(){
      console.log(this.title)
    },
    mounted(){
      // 如果用户传入定位信息 则采用传入的位置
      if(this.left && this.top) this.initPosition()
    },
    methods:{
      // 定位
      initPosition(){
        const popoverWidth = this.width , popoverHeight = this.$refs['hl-dropdown'].offsetHeight , placement = this.placement
        const elWidth = 15 , elHeight = 15 , left = this.left , top = this.top
        const position = this.getPosition({'width':elWidth,'height':elHeight,'left':left,'top':top} , {'width':popoverWidth , 'height':popoverHeight } , placement )

        this.$refs['hl-dropdown'].style.left = position.left + 'px'
        this.$refs['hl-dropdown'].style.top = position.top + 'px'
      },
      getPosition(ele1,ele2,placement){
        const gw = ele1.width,
              gh = ele1.height,
              gl = ele1.left,
              gt = ele1.top,
              xw = ele2.width,
              xh = ele2.height,
              margin = 8;
              gasket = 10;

        let xl = null,xt = null;

        switch (placement) {
          case 'top':
            xl = gl - (xw - gw) / 2
            xt = gt - xh - margin - gasket
            break;
          case 'right':
            xl = gl + gw
            xt = gt - (xh - gh) / 2 - gasket
            break;
          case 'bottom':
            xl = gl - (xw - gw) / 2
            xt = gt + gh - gasket
            break;
          case 'left':
            xl = gl - xw - margin
            xt = gt - (xh - gh) / 2 - gasket
            break;
          default:

        }

        return {
          'left':xl,
          'top':xt
        }
      },
      handleClose(){
        this.$refs['hl-dropdown'].style.left = '1000000px'
        this.$refs['hl-dropdown'].style.top = '1000000px'
      },
      handleClick(item){
        const { code } = item
        const positonIndex = this.selectedData.indexOf(code)

        if (positonIndex == -1) {
          if (this.selectedData.length == 0) {
            this.selectedData.push(code)
          } else {
            this.selectedData.splice(0, 1, code)
          }
        }

        // 吐出所有选中的数据
        let allSelectedData = []

        for (var i = 0; i < this.data.length; i++) {
          if (this.data[i].code == this.selectedData[0]) {
            allSelectedData.push(this.data[i])
          }
        }


        this.$emit('on-select-item', this.selectedData)
        this.$emit('on-change', allSelectedData, event)
      },
      handleMouseenter(){
        this.$emit('on-enter', event)
      },
      handleMouseleave(){
        this.$emit('on-leave', event)
      }

    }
  }

  Vue.component('hl-dropdown',hlDropdown)

} (window))
